<template>
    <div class="tab-warp" @click="tabClick">
      <span :class="{active:isActive}">
        <slot></slot>
      </span>
    </div>
</template>

<script>
export default {
  props: {
    isActive: Boolean
  },
  data () {
    return {}
  },
  methods: {
    tabClick: function () {
      this.$emit('clickTab')
    }
  },
  components: {},
  computed: {}
}
</script>

<style lang="stylus" scoped>
.tab-warp
  display :inline-block
  width :48%
  text-align :center
  height :0.7rem
  span
    padding :0 0.2rem
    color :#ccc
    &.active
      border-bottom :0.06rem solid #fff
      color :#fff
</style>
